<!DOCTYPE html>
<html lang="en"  xmlns:th="http://thymeleaf.org">

	<head>
		<link rel="shortcut icon" type="image/x-icon" th:href="@{/img/details.png}">
		<meta charset="UTF-8">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" th:href="@{/css/swiper-4.3.5.min.css}" href="css/swiper-4.3.5.min.css" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/goods-details.css}" href="css/goods-details.css" />
		<link rel="stylesheet" type="text/css" th:href="@{/css/head.css}" href="css/head.css" />
	</head>

	<body>
	<div th:replace="head::topbar"></div>
		<div class="container">
			<div class="goods-list">
				<span>首页</span>
				<p class="pict"><img height="12" th:src="@{/img/xbt-4_03.png}" /></p>
				<span><a href="goods-list.html">电器</a></span>
				<p class="pict"><img height="12" th:src="@{/img/xbt-4_03.png}" /></p>
				<span><a href="goods-list.html">生活电器</a></span>
				<p class="pict"><img height="12" th:src="@{/img/xbt-4_03.png}" /></p>
				<span>便携式投影仪</span>
			</div>
			<div class="detailHd">
				<form action="/indent/shopping-pay-rightnow" method="post" onsubmit="return buyJudgment()">
					<input type="hidden" name="customerId" th:value="${session.customerId}"/>
					<input id="productId" type="hidden" name="productId" th:value="${product.productId}"/>
					<input type="hidden" name="productPrice" th:value="${product.productPrice}"/>
					<div class="m-slide">
						<div class="view fl">
							<ul class="Bview">
								<li th:each="skus,itemStat :${product.getSkus()}" th:if="${itemStat.count}==1"><img th:src="@{${skus.imgSrc}}" /></li>

								<li class="view-2" th:each="skus,itemStat :${product.getSkus()}" th:if="${itemStat.count}>1"><img th:src="@{${skus.imgSrc}}" /></li>

							</ul>
							<ul class="Sview">
								<li  th:each="skus,itemStat :${product.getSkus()}"><img style="width: 100% ; height: 100%;" th:src="@{${skus.imgSrc}}" /></li>

							</ul>

						</div>
						<div class="m-info fl">
							<div class="better fr">
								<p style="color: #E36844; font-size: 20px;">99%</p>
								<p style="font-size: 13px;">好评率</p>
							</div>

							<div class="intro fl">
								<div class="detailTag">
									新品
								</div>
								<div class="name"><span th:text="${product.productName}"></span></div>
								<div class="desc">首发用券立省400元</div>
							</div>
							<div class="clear">

							</div>
							<div class="m-price">
								<div class="f-clearfix">
									<span style="font-size: 13px; padding-right: 20px;">价格</span>
									<span style="font-size: 18px; color: red;">￥</span>
									<span style="font-size: 28px; color: red; font-weight: 700;" th:text="${product.productPrice}">
									</span>
								</div>
								<div class="field">
									<ul>
										<li><span style="font-size: 13px; padding-right:20px ;">领券</span>
											<img class="ph1" th:src="@{/img/pl-1_03.png}" />
											<img class="ph2" th:src="@{/img/pl-1_06.png}" />
											<span style="border-bottom: 1px solid red; border-top: 1px solid red; background-color: floralwhite; padding: 0 3px; font-size: 13px;">四百元直减券</span>
										</li>
										<li>
											<img class="ph3" th:src="@{/img/pl-1_03.png}" />
											<img class="ph4" th:src="@{/img/pl-1_06.png}" />
											<span style="border-bottom: 1px solid red; border-top: 1px solid red; background-color: floralwhite; padding: 0 3px; font-size: 13px;">全场满639减64</span>
										</li>
										<li>
											<img class="ph5" th:src="@{/img/pl-1_03.png}" />
											<img class="ph6" th:src="@{/img/pl-1_06.png}" />
											<span style="border-bottom: 1px solid red; border-top: 1px solid red; background-color: floralwhite; padding: 0 3px; font-size: 13px;">全场满199减19</span>
										</li>
										<li>
											<a style="font-size: 13px; padding-left: 5px;" href="#">立即领取></a>
										</li>
									</ul>
								</div>
								<div style="padding-bottom: 10px;" class="f-field">
									<span style="font-size: 13px; padding-right: 20px;">积分</span>
									<span style="font-size: 13px;">购买最高得319积分</span>
								</div>
								<div class="f-bar">
								</div>
								<div style="padding-bottom: 20px;" class="policyBox" th:if="${product.productYoufei}==0.00">
									<span style="font-size: 13px; padding-right:20px ;">服务</span>
									<a href="">
										<span style="font-size: 13px;">.支持7天无忧退货</span>
										<span style="font-size: 13px; padding-left: 20px;">.四十八小时快速退款</span>
										<span style="font-size: 13px; padding-left: 20px; padding-right: 70px;color: #9c3328" th:text=".全场包邮"></span>
										<span style="font-size: 13px; padding-left: 50px;">.网易自营品牌</span>
										<span style="font-size: 13px; padding-left: 20px;">.国内部分地区无法配送</span>
									</a>
								</div>
								<div style="padding-bottom: 20px;" class="policyBox" th:if="${product.productYoufei}!=0.00">
									<span style="font-size: 13px; padding-right:20px ;">服务</span>
									<a href="">
										<span style="font-size: 13px;">.支持7天无忧退货</span>
										<span style="font-size: 13px; padding-left: 20px;">.四十八小时快速退款</span>
										<span style="font-size: 13px; padding-left: 20px; padding-right: 70px;color: #9c3328 "  th:text="'.邮费只需'+${product.productYoufei}"></span>
										<span style="font-size: 13px; padding-left: 50px;">.网易自营品牌</span>
										<span style="font-size: 13px; padding-left: 20px;">.国内部分地区无法配送</span>
									</a>
								</div>
							</div>
							<!--款式-->
							<div style="position: relative;" class="specProp">
								<span style="padding-left: 10px;line-height: 50px; vertical-align: middle;">款式</span>
								<img class="design" style=" margin-left: 20px; vertical-align: middle; " th:src="@{/img/xm-6.png}" />
								<img class="selected" th:src="@{/img/sys_item_selected.gif}" />
							</div>
							<!--数量-->
							<div class="m-number">
								<span class="fl" style="padding-left: 10px;line-height: 50px; vertical-align: middle;">数量</span>
								<div class="u-selnum fl">
									<button id="numReduce" type="button" class="u-less fl"> - </button>
									<input class="fl" id="inputt" style=" text-align: center; outline: none; color: #333333; width: 60px; height: 34px; border: 0.5px solid #DEDEDE;"  type="text" value="1" name="productCount" readonly/>
									<button id="numAdd" type="button" class="u-more fl"> + </button>
									<div class="clear"></div>
								</div>
								<span class="fl" style="padding-left: 30px;line-height: 50px; vertical-align: middle;">库存:</span>
								<span id="kucun" class="fl" style="padding-left: 10px;line-height: 50px; vertical-align: middle;color: #00a157; font-size: medium" th:text="${product.getProductCount()}"></span>
								<div class="clear"></div>
							</div>
							<!---->
							<!--购买-->
							<div style="margin-top: 30px;" class="u-buy">
								<!--<button style="margin-left: 10px;" class="u-buys fl" type="submit" ><span>立即购买</span> </button>-->
                                <button style="margin-left: 10px;cursor:pointer" class="u-buys fl" type="submit" ><span>立即购买</span></button>
								<a style="margin-left: 10px; "  id="add_shopping_cart"  class="u-bus fl" href="javascript:void(0)" th:onclick="jiaru([[${product.productId}]],[[${session.customerId}]])"><span ><img style="padding-right: 5px;" th:src="@{/img/xbt-7_02.png}"/>加入购物车</span></a>
								<p style="margin-left: 10px;" class="u-collect fl"><img class="c-star1 tran5" th:src="@{/img/c-star2_02.png}" /><span class="have2 tran5">收藏</span><img class="c-star2 tran5" th:src="@{/img/c-star2_05.png}" /><span class="have tran5">已收藏</span> </p>
								<div class="clear"></div>
							</div>
						</div>
						<div class="clear"></div>
					</div>
				</form>


			</div>

			<!-- Swiper -->
			<div class="swiper-container">
				<div style="color: #000000; font-size: 17px; padding: 10px;" class="swiper-hd">
					大家都在看
				</div>
				<div class="swiper-wrapper" th:if="${session.recommendProducts}==null">
					<div style="overflow: hidden; height: 290px;" class="swiper-slide">
						<div class="u-photo tran5">
							<a href="goods-details.html"><img class="tran5" th:src="@{/img/up-1.png}" /></a>
							<div class="prdtTags">
								<span>新品</span>
							</div>
							<h4 class="u-name"><a href="goods-details.html">网易制造X1舒耳蓝牙耳机</a></h4>
							<p style="padding-top: 3px; font-size: 14px; vertical-align: middle;">￥73
								<a href="shopping-cars.html"><img style="vertical-align: middle;" th:src="@{/img/xm-13.png}" /></a>
							</p>

						</div>

					</div>
					<div style="overflow: hidden; height: 290px;" class="swiper-slide">
						<div class="u-photo tran5">
							<a href="goods-details.html"><img style="width: 210px;" class="tran5" th:src="@{/img/up-2.png}" /></a>
							<div class="prdtTags">
								<span>新品</span>
							</div>
							<h4 class="u-name"><a  href="goods-details.html">韩国制造 超声波去角质离子导入美容仪</a></h4>
							<p style="; padding-top: 3px; font-size: 14px; vertical-align: middle;">￥269
								<a href="shopping-cars.html"><img style="vertical-align: middle;" th:src="@{/img/xm-13.png}" /></a>
							</p>

						</div>

					</div>
					<div style="overflow: hidden; height: 290px;" class="swiper-slide">
						<div class="u-photo tran5">
							<a href="goods-details.html"><img class="tran5" th:src="@{/img/up-3.png}" /></a>
							<div class="prdtTags">
								<span>新品</span>
							</div>
							<h4 class="u-name"><a href="goods-details.html">全净皓齿变速式声波电动牙刷</a></h4>
							<p style="padding-top: 3px; font-size: 14px; vertical-align: middle;">￥219
								<a href="shopping-cars.html"><img style="vertical-align: middle;" th:src="@{/img/xm-13.png}" /></a>
							</p>

						</div>

					</div>
					<div style="overflow: hidden; height: 290px;" class="swiper-slide">
						<div class="u-photo tran5">
							<a href="goods-details.html"><img class="tran5" th:src="@{/img/up-4.png}" /></a>
							<div class="prdtTags">
								<span>新品</span>
							</div>
							<h4 class="u-name"><a href="goods-details3.html">金属跟搭带女跟鞋</a></h4>
							<p style="padding-top: 3px; font-size: 14px; vertical-align: middle;">￥299
								<a href="shopping-cars.html"><img style="vertical-align: middle;" th:src="@{/img/xm-13.png}" /></a>
							</p>

						</div>

					</div>
				</div>
				<div class="swiper-wrapper" th:if="${session.recommendProducts}!=null">
					<div style="overflow: hidden; height: 290px;" class="swiper-slide" th:each="rp,itemStat :${session.recommendProducts}" th:if="${itemStat.count<=4}">
						<div class="u-photo tran5">
							<a th:href="@{/product/goods-details(productId=${rp.productId})}"><img class="tran5" style="width: 210px;height: 210px;" th:src="@{${rp.imgSrc}}" /></a>
							<div class="prdtTags">
								<span>新品</span>
							</div>
							<h4 class="u-name"><a th:href="@{/product/goods-details(productId=${rp.productId})}" th:text="${rp.productName}">网易制造X1舒耳蓝牙耳机</a></h4>
							<p style="padding-top: 3px; font-size: 14px; vertical-align: middle;" th:text="${rp.productPrice}">￥73
								<img style="vertical-align: middle;" th:src="@{/img/xm-13.png}" />
							</p>

						</div>

					</div>
				</div>
				<!-- Add Arrows -->
				<div class="swiper-button-next"></div>
				<div class="swiper-button-prev"></div>
			</div>

			<div style="" class="left fl">
				<!--选项卡-->
				<div class="tab" id="tab1">
					<ul class="tab-title active" >
						<li class="active fl">详情</li>
						<li class="fl">评价</li>
						<li class="fl">常见问题</li>
						<div class="clear">

						</div>
					</ul>
					<ul style="height: 100%;" class="tab-content m-attrList" id="">
						<li>
							<div class="details">
								<p class="fl">产品详情 <span>130mm*130mm*130mm</span></p>
								<p class="fl">材质 <span style="padding-left: 100px;">ABS+铝合金+珠光漆</span></p>
								<div class="clear">

								</div>
							</div>
							<div class="consume">
								<p class="fl">功耗<span>45W</span></p>
								<p style="padding-left: 144px;" class="fl">电源适配器 <span style="padding-left: 57px;">19V/3.4A</span></p>
								<div class="clear">

								</div>
							</div>
							<div class="battery">
								<p class="fl">电池容量 </p><span class="fl" style="width: 350px">16000mAH大容量 音乐播放7小时、电影播放2.5小时。充电时长约2小时，充电期间产品正常使用。</span>
								<div class="clear">

								</div>
							</div>
							<div class="after-sale">
								<p>售后服务 </p>
								<span>本品支持7天无理由退换货。</span>
								<span>自用户签收之日起，15日内如本产品出现质量问题，用户可选择换货。</span>
								<span>自用户签收之日起，1年内如本产品出现质量问题，用户可将产品寄回严选免费保修，严选承诺收到产品后3个工作日内完成维修或换新寄出产品，运费由严选承担；若非质量问题引起故障，维修费用和运费则需用户自行承担。</span>
								<span>4.首次使用时如电量不足请及时充电，充电期间产品正常使用。</span>
								<span>5. 如您需购买麦克风、游戏手柄等用于本投影仪的配件，建议咨询客服购买推荐款式（已适配确认可用），以免自行购买款式无法适用。</span>

							</div>
							<div class="hint">
								<p>售后服务 </p>
								<span>1.7天无忧退换货说明：产品、配件需保持完好，无磨损、污渍。包材、说明书齐全不影响二次销售。</span>
								<span>2.本品赠送定制三脚架，三脚架顶部360度云台可随意调整投影仪角度，旋转三脚架中部可实现三脚架两档高度调整。</span>
								<span style="width: 700px;">3.因网络信号、互联网电视政策限制导致的使用问题不属于投影仪质量问题，产品使用问题欢迎咨询严选客服。</span>
							</div>
							<img th:src="@{/img/xm-12-1.jpg}" />
							<img th:src="@{/img/xm-12-2.png}" />
							<img th:src="@{/img/xm-12-3.png}" />
						</li>
						<li style="padding-top: 27px">
							<div class="m-goodRates fl">
								<div class="label">好评率</div>
								<div class="goodRate">90.3%</div>
								<div class="m-score">
									<img width="14px" th:src="@{/img/qq_06(1).png}" />
									<img width="14px" th:src="@{/img/qq_06(1).png}" />
									<img width="14px" th:src="@{/img/qq_06(1).png}" />
									<img width="14px" th:src="@{/img/qq_06(1).png}" />
									<img width="14px" th:src="@{/img/qq_06(1).png}" />
								</div>
							</div>
							<div class="m-commentNav fl">
								<div class="title">大家都在说：</div>
								<div class="labelList"> <span class="label active " data-name="全部" data-type="1">全部（31）</span> <span class="label  " data-name="有图" data-type="0">有图（16）</span> <span class="label  " data-name="追评" data-type="0">追评（4）</span> </div>
							</div>
							<div class="clear">
							</div>
							<div class="m-bar">

							</div>
							<div class="m-sorts"> <span class="name">排序：</span>
								<a href="javascript:;" class="sort ">默认</a>
								<a href="javascript:;" style="color: black;" class="sort ">评价时间 <i class="w-icon"></i></a>
							</div>
							<div class="m-commentUser">
								<div class="t-img fl">
									<img style="border-radius: 50px;" width="50px" th:src="@{/img/user-1.jpeg}" />
									<div class="username-withIcon">
										<a class="w-icon-member" href="#"><img style="vertical-align: middle;" th:src="@{/img/V-1.png}" /><span class="username">b****0</span></a>
									</div>
								</div>
								<div class="m-commentItem fl">
									<div class="m-score">
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
									</div>
									<div class="skuInfo"> <span class="mr20">款式:便携</span> </div>
									<div class="m-content"> 效果绝对好，轻便颜值高。就是有些矫正和移动硬盘读取还在研究中 </div>
									<div class="m-picList" style="display: inline-block;">
										<img th:src="@{/img/pj-z.jpg}" />
										<img th:src="@{/img/pj-z.jpg}" />
										<img th:src="@{/img/pj-z.jpg}" />
									</div>
									<div class="m-picList-big">
										<!-- Swiper -->
										<div class="swiper-container c">
											<div style="font-size: 28px;" class="m-del fr">
												<span style="cursor: pointer;">×</span>
											</div>
											<div class="clear">

											</div>
											<div class=".c swiper-wrapper">

												<div style="padding: 10px;" class=".c swiper-slide">
													<img height="400px" th:src="@{/img/pj-2.jpg}" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" th:src="@{/img/pj-2.jpg}" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" th:src="@{/img/pj-2.jpg}" />
												</div>
											</div>
											<!-- Add Arrows -->
											<div class=".c swiper-button-next"></div>
											<div class=".c swiper-button-prev"></div>
										</div>

									</div>
								</div>
								<div class="clear">

								</div>
							</div>
							<div class="m-commentUser">
								<div class="t-img fl">
									<img style="border-radius: 50px;" width="50px" th:src="@{/img/user-1.jpeg}" />
									<div class="username-withIcon">
										<a class="w-icon-member" href="#"><img style="vertical-align: middle;" th:src="@{/img/V-1.png}" /><span class="username">b****0</span></a>
									</div>
								</div>
								<div class="m-commentItem fl">
									<div class="m-score">
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
									</div>
									<div class="skuInfo"> <span class="mr20">款式:便携</span> </div>
									<div class="m-content"> 效果绝对好，轻便颜值高。就是有些矫正和移动硬盘读取还在研究中 </div>
									<div class="m-picList" style="display: inline-block;">
										<img th:src="@{/img/pj-z.jpg}" />
										<img th:src="@{/img/pj-z.jpg}" />
										<img th:src="@{/img/pj-z.jpg}" />
									</div>
									<div class="m-picList-big">
										<!-- Swiper -->
										<div class="swiper-container c">
											<div style="font-size: 28px;" class="m-del fr">
												<span style="cursor: pointer;">×</span>
											</div>
											<div class="clear">

											</div>
											<div class=".c swiper-wrapper">

												<div style="padding: 10px;" class=".c swiper-slide">
													<img height="400px" th:src="@{/img/pj-2.jpg}" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" th:src="@{/img/pj-2.jpg}" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" th:src="@{/img/pj-2.jpg}" />
												</div>
											</div>
											<!-- Add Arrows -->
											<div class=".c swiper-button-next"></div>
											<div class=".c swiper-button-prev"></div>
										</div>

									</div>
								</div>
								<div class="clear">

								</div>
							</div>
							<div class="m-commentUser">
								<div class="t-img fl">
									<img style="border-radius: 50px;" width="50px" th:src="@{/img/user-1.jpeg}" />
									<div class="username-withIcon">
										<a class="w-icon-member" href="#"><img style="vertical-align: middle;" th:src="@{/img/V-1.png}" /><span class="username">b****0</span></a>
									</div>
								</div>
								<div class="m-commentItem fl">
									<div class="m-score">
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
										<img width="14px" th:src="@{/img/qq_06(1).png}" />
									</div>
									<div class="skuInfo"> <span class="mr20">款式:便携</span> </div>
									<div class="m-content"> 效果绝对好，轻便颜值高。就是有些矫正和移动硬盘读取还在研究中 </div>
									<div class="m-picList" style="display: inline-block;">
										<img th:src="@{/img/pj-z.jpg}" />
										<img th:src="@{/img/pj-z.jpg}" />
										<img th:src="@{/img/pj-z.jpg}" />
									</div>
									<div class="m-picList-big">
										<!-- Swiper -->
										<div class="swiper-container c">
											<div style="font-size: 28px;" class="m-del fr">
												<span style="cursor: pointer;">×</span>
											</div>
											<div class="clear">

											</div>
											<div class=".c swiper-wrapper">

												<div style="padding: 10px;" class=".c swiper-slide">
													<img height="400px" th:src="@{/img/pj-2.jpg}" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" th:src="@{/img/pj-2.jpg}" />
												</div>
												<div style="padding: 10px;" class="swiper-slide">
													<img height="400px" th:src="@{/img/pj-2.jpg}" />
												</div>
											</div>
											<!-- Add Arrows -->
											<div class=".c swiper-button-next"></div>
											<div class=".c swiper-button-prev"></div>
										</div>

									</div>
								</div>
								<div class="clear">
								</div>
							</div>
						</li>
						<li>

							<div class="after-sale">
								<p>购买运费如何收取？ </p>
								<span>单笔订单金额（不含运费）满88元免邮费；不满88元，每单收取10元运费。</span>
								<span>(港澳台地区需满500元免邮费；不满500元，每单收取30元运费)。</span>
							</div>
							<div class="hint">
								<p>网易严选的订单如何配送？</p>
								<span style="width: 650px;">网易严选会根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。</span>
							</div>
							<div class="after-sale">
								<p>如何申请退换货？ </p>
								<span>1.自收到商品之日起30日内，顾客可申请无忧退货；如果是退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；</span>
								<span>2.内裤和食品等特殊商品无质量问题不支持退换货；</span>
								<span>3.退货流程：</br>
								确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；
								</span>

								<span>4.换货流程：</br>
								确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成;
								</span>

								<span>5.退换货运费由网易严选承担（大件商品除外）。上门取件费用由网易严选统一与快递服务商结算，顾客只需将退换货商品交给上门取件快递员寄回。如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，严选将以现金券形式为用户报销运费，不接受单方面到付件。</span>
							</div>
							<div class="after-sale">
								<p>如何开具发票？ </p>
								<span>1.请在下单时选择“我要开发票”并填写相关信息（APP仅限2.4.0及以上版本）。开具增值税专用发票需在下单时填写增票资质信息。温馨提示：请确保增票资质信息与贵司税务登记证信息一致，避免因开票信息错误给贵司带来损失。</span>
								<span>2.可选开票内容：</br>
依照国税总局开票法规，严选订单开具纸质发票、电子发票，开票内容为明细；礼品卡开票内容为预付卡；增值税专用发票开票内容为明细。</span>
							</div>
						</li>

					</ul>
				</div>

			</div>
			<div class="right fl">

				<div class="hot-sell">
					<header class="header">24小时热销</header>
					<ul>
						<li><a href="goods-details.html"><img th:src="@{/img/xr-1.png}" /></a>
							<p>
								<a style="font-size: 14px; color: #000000;" href="goods-details3.html">严选礼品卡 100元面值</a>
							</p>
							<div class="r-price">
								<span style="font-size: 14px;">￥100</span>
								<span class="r-bus"><a href="shopping-cars.html"><img th:src="@{/img/xm-13.png}"/></a></span>
							</div>
						</li>
						<li><a href="goods-details3.html"><img th:src="@{/img/xr-2.png}" /></a>
							<p>
								<a style="font-size: 14px; color: #000000;" href="goods-details3.html">谷风一木 小卷纸</a>
							</p>
							<div class="r-price">
								<span style="font-size: 14px;">￥27.9</span>
								<span class="r-bus"><a href="shopping-cars.html"><img th:src="@{/img/xm-13.png}"/></a></span>
							</div>
						</li>
						<li style="position: relative;"><a href="goods-details3.html"><img th:src="@{/img/xr-3.png}" /></a>
							<div class="r-color">
								十色可选
							</div>
							<p>
								<a style="font-size: 14px; color: #000000;" href="goods-details3.html">玩趣彩虹四季拖鞋</a>
							</p>
							<div class="r-price">
								<span style="font-size: 14px;">￥19.9</span>
								<span class="r-bus"><a href="shopping-cars.html"><img th:src="@{/img/xm-13.png}"/></a></span>
							</div>
						</li>
						<li><a href="goods-details3.html"><img th:src="@{/img/xr-4.png}" /></a>
							<p>
								<a style="font-size: 14px; color: #000000;" href="goods-details3.html">懒人抹布</a>
							</p>
							<div style="border-bottom: 0px;" class="r-price">
								<span style="font-size: 14px;">￥13.9</span>
								<span class="r-bus"><a href="shopping-cars.html"><img th:src="@{/img/xm-13.png}"/></a></span>
							</div>
						</li>
					</ul>
				</div>
				<div class="special">
					<header class="header">专题推荐</header>
					<ul>
						<li style="position: relative;">
							<a href="goods-details3.html"><img th:src="@{/img/xr-5.png}" />
								<div class="text">
									8月24日新品放映室
								</div>
							</a>

						</li>
						<li style="position: relative;">
							<a href="goods-details3.html"><img th:src="@{/img/xr-6.png}" />
								<div class="text">
									吃得到果肉的，才是真凤梨酥
								</div>
							</a>

						</li>
						<li style="position: relative;">
							<a href="goods-details3.html"><img th:src="@{/img/xr-7.png}" />
								<div class="text">
									宝贝开学总动员
								</div>
							</a>

						</li>
						<li style="position: relative;">
							<a href="goods-details3.html"><img th:src="@{/img/xr-8.png}" />
								<div class="text">
									别提起好水，你只知道依云
								</div>
							</a>

						</li>

					</ul>
				</div>

			</div>
			<div class="clear">

			</div>
		</div>
		<div class="tab2">
			<div class="container">
				<ul>
					<li>详情</li>
					<li>评价</li>
					<li>常见问题</li>
				</ul>
			</div>
		</div>
		<div th:replace="footer::#footbar"></div>
		<script th:src="@{/js/swiper.min.js}" src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/swiper-4.3.5.min.js}" src="js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/js/jquery-3.3.1.min.js}" src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script th:src="@{/layer-v3.1.1/layer/layer.js}" src="layer-v3.1.1/layer/layer.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		$(document).ready(function() {
			//底部侧边栏关闭
			$(".icon-sidebarx").click(function() {
				$(this).parents(".sidebar-b-bac").remove();
			});
			//右边侧边栏关闭
			$(".icon-subx").click(function() {
				$(this).parents(".sub-list").css("display", "none");
			});
			//右边hover弹窗input隐藏出现
			$(".sub-inputbox").click(function() {
				$(this).prev(".icon-inputx").css("opacity", 1);
			});
			//下拉到200px侧边栏出现回到顶部且导航栏出现，上啦消失，且导航栏消失
			$(window).scroll(function() {
				var top = $(document).scrollTop();
				if(top > 200) {
					$(".sidebar-r-totop").css({
						display: 'block'
					});
					$(".navigation-fix").slideDown();
				} else {
					$(".sidebar-r-totop").css({
						display: 'none'
					});
					$(".navigation-fix").slideUp();
				}
			});
			//点击回到顶部，回到顶部
			$(".sidebar-r-totop").click(function() {
				$("html,body").animate({
					scrollTop: 0
				}, 500);
			});

		})
	</script>

		<script type="text/javascript">
			var flag = true
			$('.u-collect').click(function() {
				
				if(flag) {
					$('.c-star1').css('transform', 'translateY(-17px)')
					$('.c-star2').css('transform', 'translateY(-48px)')
					$('.have2').css('opacity','0')
					$('.have').css('opacity','1')
					flag=false
				}else {
					$('.c-star1').css('transform', 'translateY(2px)')
					$('.c-star2').css('transform', 'translateY(17px)')
					$('.have2').css('opacity','1')
					$('.have').css('opacity','0')
					//配置一个透明的询问框
						layer.msg('取消收藏', {
							time: 2000, //2s后自动关闭
							
						});
					flag=true
				}

			})
		</script>

		<script type="text/javascript">
			$(window).scroll(function() {
				var top = $(document).scrollTop();
				if(top > 1200.5) {
					$('.navigation-fix').slideUp().remove()
					$('.tab2').css('display', 'block')
					$('.tab2').slideDown()

				} else {
					$('.tab2').slideUp()
					$('.tab2').css('display', 'none')
				}

			})
		</script>

		<script type="text/javascript">
			$('.Sview li').hover(function() {
				$('.Sview li').css('border', 'none')
				$(this).css('border', '1px solid red')
				var i = $(this).index();
				$(this).parent().siblings('.Bview').children('li').css('display', 'none');
				$(this).parent().siblings('.Bview').children('li').eq(i).css('display', 'block')
			})
		</script>

		<script type="text/javascript">
			var flag = true;
			$('.specProp img').click(function() {
				if(flag) {
					$(".selected").css({
						display: 'block'
					});
					$('.design').css({
						border: '0.5px solid red'
					});
					flag = false
				} else {
					$(".selected").css({
						display: 'none'
					});
					$('.design').css({
						border: '0px'
					});
					flag = true
				}
			})
		</script>

		<!--轮播-->
		<script>
			var swiper = new Swiper('.swiper-container', {
				slidesPerView: 4,
				spaceBetween: 10,
				slidesPerGroup: 4,
				loop: true,
				loopFillGroupWithBlank: true,

				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});
		</script>
		<!--轮播2-->
		<!-- Initialize Swiper -->
		<script>
			var swiper = new Swiper('.c', {
				slidesPerGroup: 1,
				navigation: {
					nextEl: '.c .swiper-button-next',
					prevEl: '.c .swiper-button-prev',
				},
			});
		</script>
		
		<script type="text/javascript">
			$('.m-commentUser img').click(function() {
				$(this).parent().siblings('.m-picList-big').find('.c').css('display', 'block')
			})
		</script>
		<script type="text/javascript">
			$('.m-del span').click(function() {
				$(this).parents('.c').css('display', 'none')
			})
		</script>
		<!--选项卡-->
		<script type="text/javascript">
			$('.tab-title li').click(function() {
				//切换active
				$(this).siblings().removeClass('active');
				$(this).addClass('active');
				var i = $(this).index();
				//				console.log(i)
				$(this).parent().siblings('.tab-content').find('li').css('display', 'none')
				$(this).parent().siblings('.tab-content').find('li').eq(i).css('display', 'block');

			})
		</script>

		<!-- 判断自己选择的商品是否超过库存 -->
		<script type="text/javascript">
			$(function () {
				$("#numAdd").off().on('click',function () {
					$.ajax({
						cache : false,
						type : "POST",
						url : "/product/numAdd?num="+$("#inputt").val() +"&productId="+$("#productId").val(),
						async : true,
						success:function(data) {
							if (data == "") {
								var i = parseInt($("#inputt").val()) + 1;
								$("#inputt").val(i);
							}else {
								layer.msg("没货啦，亲~");
								$("#inputt").val(data);
							}
						}
					})
				})
			})
		</script>


		<!-- 判断自己选择的商品数量是否小于1-->
		<script type="text/javascript">
			$(function () {
				$("#numReduce").off().on('click',function () {
					$.ajax({
						cache : false,
						type : "POST",
						url : "/product/numReduce?num="+$("#inputt").val(),
						async : true,
						success:function(data) {
							if (data == "") {
								var i = parseInt($("#inputt").val()) - 1;
								$("#inputt").val(i);
							}else {
								layer.msg("不能小于1件商品哦");
								$("#inputt").val(data);
							}
						}
					})
				})
			})

			/**
			 * 加入购物车
			 */
			function jiaru(productId,customerId) {
				//alert(11)
				var count = $("#inputt").val();
				var kucun = $("#kucun").text();
				var flag = 0;
				if (parseInt(count) > parseInt(kucun)){
					layer.msg("商品没货啦，再逛逛吧");
				}else {
					$.ajax({
						cache : false,
						type : "POST",
						url : "/shoppingcart/panduan?productId="+productId+"&count="+count,
						async : true,
						success:function(data) {
							if (data == "error") {
								// layer.msg("购物车中已经存在该商品",{time:1000});
								layer.msg("购物车中货物太多，库存中该商品数量不足了，亲~",{icon: 5,time:1000,area:['300px', '88px']});
								$("#inputt").val("1");
							}else if(data == "success"){
								flag = 1;
								jiarugouwuche(productId,customerId,count,flag);
							}else {
								flag = 2;
								jiarugouwuche(productId,customerId,count,flag);
							}
						}
					})
				}
			}

			function jiarugouwuche(productId,customerId,count,flag) {
				window.location.href ="/shoppingcart/addcars?productId="+productId+ "&customerId="+customerId+"&count="+count+"&flag="+flag;
			}

			/**
			 * 立即购买之前的判断
			 */
			function buyJudgment() {
				var count = $("#inputt").val();
				var kucun = $("#kucun").text();
				if (parseInt(count) > parseInt(kucun)){
					layer.msg("商品没货啦，再逛逛吧");
					return false;
				}else {
					return true;
				}
			}
		</script>
	</body>

</html>